<template>
  <div>
    <el-form :model="invitaionForm" :rules="invitaionFormRoles" ref="invitaionForm" label-width="10em">
      <h-box header="创建一个新的品牌">
        <el-steps :active="0" simple class="hui-mb-2">
          <el-step title="填写邀请码" icon="el-icon-edit"></el-step>
          <el-step title="授权小程序" icon="el-icon-upload"></el-step>
          <el-step title="创建完成" icon="el-icon-check"></el-step>
        </el-steps>

        <el-form-item label="邀请码" prop="code">
          <el-input v-model="invitaionForm.code" placeholder="请填写邀请码" style="width: 300px;"></el-input>
        </el-form-item>

        <el-form-item slot="footer" class="hui-mb-0">
          <el-button @click="handleActive('invitaionForm')" :loading="loading" type="primary">下一步</el-button>
        </el-form-item>
      </h-box>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      invitaionForm: {
        code: ''
      },
      invitaionFormRoles: {
        code: [
          {
            required: true,
            message: '邀请码必填',
            trigger: 'blur'
          },
          {
            len: 16,
            message: '邀请码为16位字母数字组合',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  methods: {
    handleActive (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 模拟接口提交
          this.$loading()
          this.loading = true
          setTimeout(() => {
            this.$message({
              message: '邀请码验证成功！',
              type: 'success'
            })
            this.$loading().close()
            this.$router.replace({
              path: 'openauth'
            })
          }, 1000)
        } else {
          this.$message({
            message: '验证码错误，请重新检查',
            type: 'warning'
          })
          this.loading = false
        }
      })
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="less">
</style>
